<template>
  <GridView :gridJson="gridJson" v-if="gridJson">
    <!-- 查询列表扩展 -->
    <template #query> </template>
    <!-- 操作列表扩展 -->
    <template #column="scope"></template>
    <!-- 数据处理扩展,存在时替换默认处理逻辑,插入对应字段名称的插槽即可替换默认内容渲染 -->
    <template #字段名称="{ scope, field }"></template>
    <template #name="{ scope, field }"
    ><el-icon style="margin-right: 10px"
    ><component :is="scope.row.icon ? scope.row.icon : null" /></el-icon
    >{{ scope.row.name }}</template
    >
    <!-- 操作列表扩展 -->
    <template #operate="{ scope }"></template>
    <!-- 编辑页面扩展任意属性 -->
    <template #EDIT_ADD_FIELD="{ modal }"></template>
    <!-- 添加页面扩展任意属性 -->
    <template #ADD_ADD_FIELD="{ modal }"> </template>
  </GridView>
  <el-empty description="网格数据加载中" v-else />
</template>
<script setup>
import GridView from '../grid/json/preview/GridView.vue'
// 单页面网格模版
import { inject, ref, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
const router = useRoute()
const api = inject('api')
const gridJson = ref(null)
onBeforeMount(() => {
  api
      .getApi('FaSysGrid', router.meta.grids[0])
      .getCurrentJson()
      .then((data) => {
        gridJson.value = data
      })
})
console.log('加载BaseIndex.vue', gridJson)
</script>
<style scoped></style>
